<template>
            <div>

                <h1>请在下面发表评论:</h1>
                <hr>
                name: <input type="text" v-model="name">
                <textarea name="" id="textarea" placeholder="请输入要评论的内容(最多120字！) " maxlength="120" v-model="text"></textarea>
                <button type="button"  @click="add()" class="mui-btn mui-btn-royal mui-btn-block" >发表评论</button>
            
<div id="list">
        <div id="item">
                    <div id="title">
                        第一楼:&nbsp;&nbsp;123 &nbsp;&nbsp; 匿名用户:&nbsp;&nbsp;&nbsp;&nbsp;123 发表时间:&nbsp;&nbsp;{{time|formatTime}}
                    </div>

                    <div id="text">
                                清明时节雨纷纷,路上行人欲断魂; <br>
                                莫问酒家何处去,穿入白云行翠微; <br>
                    </div>
        </div>
</div>
<div id="list">
        <div id="item">
                    <div id="title">
                        第一楼:&nbsp;&nbsp;123 &nbsp;&nbsp; 匿名用户:&nbsp;&nbsp;&nbsp;&nbsp;123 发表时间:&nbsp;&nbsp;{{time|formatTime}}
                    </div>

                    <div id="text">
                                清明时节雨纷纷,路上行人欲断魂; <br>
                                莫问酒家何处去,穿入白云行翠微; <br>
                    </div>
        </div>
</div>
<div id="list">
        <div id="item">
                    <div id="title">
                        第一楼:&nbsp;&nbsp;123 &nbsp;&nbsp; 匿名用户:&nbsp;&nbsp;&nbsp;&nbsp;123 发表时间:&nbsp;&nbsp;{{time|formatTime}}
                    </div>

                    <div id="text">
                                清明时节雨纷纷,路上行人欲断魂; <br>
                                莫问酒家何处去,穿入白云行翠微; <br>
                    </div>
        </div>
</div>
<button type="button" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">加载更多评论....</button>
<div id="list" v-for="item in list" :key="item.id">
        <div id="item">
                    <div id="title" >
                     第一楼:&nbsp;&nbsp;123&nbsp;&nbsp; 匿名用户:&nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}  &nbsp;&nbsp;发表时间:&nbsp;&nbsp;{{time|formatTime}} 
                    </div>

                    <div id="text1"  >
                         {{item.text}}     
                    </div>
        </div>
</div>

            
            
            
            

            </div>

</template>




<style>
#item{
    border: 2px solid  rgb(2, 86, 165);
}
#title{
    background-color:gray;
}
</style>




<style>
#textarea{
    height: 200px;
}
#text1{
    color: lightpink;
}

</style>



<script>
import { Toast} from 'mint-ui'

export default {
    data(){
        return {
            time: new Date() ,
            text:[],
            name: '',
            id: '',
            list: [  {    text: " "  }]
        }
    },
    methods:{
        add(){

             this.list.unshift( { name : this.name})
            this.list.unshift( {  text:this.text} )
            
            
           if(this.text==0){
                Toast("[评论框]不能为空!")
           }
        }
        
    },
    filters:{
			"formatTime":function(str){
             var dt= new Date(str)        //根据给定的字符串 得到一个特定的时间
var y =dt.getFullYear()
var x=dt.getMonth() + 1
var z =dt.getDate()

var h = dt.getHours()
var m = dt.getMinutes()
var s = dt.getSeconds()
return  ` ${y}-${x}-${z} ${h}:${m}:${s}`
           }
    },
      
    }



</script>
